<template>
  <div style="width: 100%">
    <n-upload
        v-model:file-list="fileList"
        :action="useFetchConfig.baseURL+'/v1/oss/upload/file'"
        :headers="useFetchConfig.headers"
        name="file"
        :data="data"
        list-type="image-card"
        :on-finish="handleUploadFinish"
        :on-error="handleUploadError"
        :on-remove="handleRemoveUpload"
        :accept="accept"
        :multiple="max > 1"
        :max="max"
    />
  </div>
</template>
<script setup>
const useFetchConfig = useGetFetchOptions()
const fileList = ref([])
const emits = defineEmits(["update:modelValue","success"])

const props = defineProps({
  modelValue:[String,Object],
  accept:{
    type:String,
    default:"image/png,image/jpeg,image/gif"
  },
  data:[Object],
  max:{
    type:Number,
    default:1
  }
})

// 上传成功
const handleUploadFinish = (...e)=>{
  const { file,event } = e[0]
  const response = JSON.parse(event.target.response)
  // 这里为什么赋值：原因是fileList只读取本地文件的信息和上传成功的信息，没有服务端上传的真实图片的地址信息，你必须自己回填进行，否则就是一个本地图片
  // 就一句话: 获取文件上传真实的图片地址
  file.url = response.data.url
  // 这里如果你去改变上传文件的信息的时候，它会自动把上传的URL进行补充。最好返回一些，
  emits("update:modelValue",file.url)
  emits("success",file.url)
  return file
}

// 删除方法
const handleRemoveUpload = (...e) =>{
  const { file,event } = e[0]
  emits("update:modelValue","")
}

// 上传失败
const handleUploadError = (...e)=>{
    useMessage().error("删除文件失败!")
}

// 初始化页面的时候，如果组件有modelValue直接把值拿到回填上传组件中
const handleInitUploadData = () => {
  const url = props.modelValue
  fileList.value  = url ? [{
    id: url,
    name: url,
    status: 'finished',
    url: url
  }]: []
}

watch(props,(url)=>{
  handleInitUploadData()
},{deep:true,immediate:true})

</script>
<style scoped>

</style>